<template>
  <div class="box">
      <div class="sbox" v-for="(v,i) in arr" :key="i">
          <p>
            <img :src="v.urlimg" alt="">
          </p>
          <div class="bot">
            <p>{{v.title}}</p>
            <p>{{v.save}}</p>
            <p>
              <span>{{v.ff}}</span>
              <span>{{v.caixi}}</span>
            </p>
          </div>
      </div>
       

      
  </div>
</template>

<script>
import axios from "@/apis/api.js"
export default {
  data(){
    return{
      arr:[]
    }
  },
  created(){
    axios("/data/list/jingxuan").then((ok)=>{
      console.log(ok.data.data);
      this.arr=ok.data.data
    })
  }
}
</script>

<style scoped>
  .box{
    width: 100%;
    min-height:5rem ;
    padding-top:.2rem;
    background: rgb(224, 224, 224);
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }
  .sbox{
    width: 1.7rem;
    height: 2.6rem;
    background: white;
    border-radius: .1rem;
    margin: 0 .08rem .2rem .08rem;
  }
  .sbox p img{
    width: 1.7rem;
  }
  .bot p:nth-child(1){
    font-weight: 600;
  }
  .bot p:nth-child(2){
    font-size: .14rem;
    color: gray;
  }
  .bot p:nth-child(3){
    font-size: .12rem;
    margin: .06rem 0;
    color: rgb(117,100,88);
  }
  .bot p:nth-child(3) span{
    background: rgb(220,234,236);
    margin-left: .1rem;
  }
</style>